<template>
    <el-header class="header">
        <div class="logo-container">
            <img src="../assets/environmental protection.png" alt=" 东软环保公众监督系统" class="logo">
        </div>
        <div class="nav-links" v-if="!isMobile">
            <el-link type="primary" @click="goToPage('/')">首页</el-link>
            <el-link @click="goToPage('/neps')">公众监督员端</el-link>
            <el-link @click="goToPage('/nepg')">网格员端</el-link>
            <el-link @click="goToPage('/nepm')">系统管理端</el-link>
            <el-link @click="goToPage('/nepv')">决策者端</el-link>
        </div>
        <div class="mobile-menu" v-else>
            <el-button type="primary" @click="toggleMobileMenu">
                <el-icon :size="20">
                    <Menu />
                </el-icon>
            </el-button>
            <div class="mobile-menu-dropdown" v-show="mobileMenuVisible">
                <el-link type="primary" @click="goToPage('/')">首页</el-link>
                <el-link @click="goToPage('/neps')">公众监督员端</el-link>
                <el-link @click="goToPage('/nepg')">网格员端</el-link>
                <el-link @click="goToPage('/nepm')">系统管理端</el-link>
                <el-link @click="goToPage('/nepv')">决策者端</el-link>
            </div>
        </div>
    </el-header>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { Menu } from '@element-plus/icons-vue';

const router = useRouter();
const isMobile = ref(false);
const mobileMenuVisible = ref(false);

const toggleMobileMenu = () => {
    mobileMenuVisible.value = !mobileMenuVisible.value;
};

// 检测屏幕尺寸
const checkScreenSize = () => {
    isMobile.value = window.innerWidth < 768;
    if (isMobile.value) {
        mobileMenuVisible.value = false;
    }
};

// 页面跳转
const goToPage = (path) => {
    router.push(path);
    if (isMobile.value) {
        mobileMenuVisible.value = false;
    }
};

// 初始化和监听窗口大小变化
const init = () => {
    checkScreenSize();
    window.addEventListener('resize', checkScreenSize);
};

init();
</script>

<style scoped>
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: 0 40px;
    height: 60px;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    height: 40px;
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 20px;
}

.nav-links el-link {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    transition: color 0.3s;
}

.nav-links el-link:hover {
    color: #409EFF;
}

.mobile-menu {
    display: flex;
    align-items: center;
}

.mobile-menu-dropdown {
    position: absolute;
    top: 60px;
    right: 0;
    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 10px 20px;
    border-radius: 4px;
    z-index: 10;
}

.mobile-menu-dropdown el-link {
    display: block;
    margin: 8px 0;
    font-size: 16px;
}

@media (max-width: 768px) {
    .header {
        padding: 0 20px;
    }

    .nav-links {
        display: none;
    }
}
</style>